<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<title>inputEx RPC</title>

<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../../lib/yui/reset-fonts/reset-fonts.css">
<link rel="stylesheet" type="text/css" href="../../lib/yui/container/assets/container.css"> 
<link rel="stylesheet" type="text/css" href="../../lib/yui/assets/skins/sam/skin.css">

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../css/inputEx.css' />

<!-- Demo CSS -->
<link rel="stylesheet" type="text/css" href="../css/demo.css"/>
<link rel="stylesheet" type="text/css" href="../css/dpSyntaxHighlighter.css">

<style>
p { margin: 10px; }
strong { font-weight: bold; }
.photo { width: 240px; height: 240px; float: left; }
.photo img { margin: auto auto; }
</style>
</head>

<body class="yui-skin-sam">
	

<!-- Example 1 -->
<div class='exampleDiv'>
	<h2>YUI-RPC example with flickr</h2>
	<p>This example uses the <a href="smd/flickr.smd">Flickr SMD</a> to generate the form using inputEx.RPC.generateServiceForm.</p>
	<p>The request is handled by YUI-RPC (using jsonp), which callbacks to our simple viewing method.</p>
	<div class='demoContainer' id='container1'></div>
	<p>Results :</p>
	<div>
		<div id='photos'></div>
		<div style='clear: both;'></div>
	</div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			var service = new inputEx.RPC.Service("flickr.smd",{ 
				success: function() {

					// Creates the form from service.getPublicPhotos method
					inputEx.RPC.generateServiceForm(service.getPublicPhotos, { parentEl: 'container1' },{
							success: function(results) {

								// Get the result and display the images
								var treeContainer = YAHOO.util.Dom.get('photos');
								treeContainer.innerHTML = "";
								var list = results.photos.photo;
								for(var i = 0 ; i != list.length-1 ; i++) {
									var photo = list[i];
									var url = "http://farm"+photo.farm+".static.flickr.com/"+photo.server+"/"+photo.id+"_"+photo.secret+"_m.jpg";
									treeContainer.appendChild( inputEx.cn('div', {className: 'photo'}, null, String.fromCharCode(60)+"img src='"+url+"' /"+String.fromCharCode(62) ) );
								}	

							}
						});

				}
			});
		</textarea>
	</div>
</div>

<!-- YUI -->
<script type="text/javascript" src="../../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../../lib/yui/get/get-min.js"></script>
<script type="text/javascript" src="../../lib/yui/json/json-min.js"></script>

<!-- inputEx -->
<script type="text/javascript" src="../../js/inputex.js"></script>
<script type="text/javascript" src="../../js/mixins/choice.js"></script>
<script type="text/javascript" src="../../js/Field.js"></script>
<script type="text/javascript" src="../../js/Group.js"></script>
<script type="text/javascript" src="../../js/widgets/Button.js"></script>
<script type="text/javascript" src="../../js/Form.js"></script>
<script type="text/javascript" src="../../js/fields/StringField.js"></script>
<script type="text/javascript" src="../../js/fields/SelectField.js"></script>
<script type="text/javascript" src="../../js/fields/IntegerField.js"></script>
<script type="text/javascript" src="../../js/json-schema.js"></script> 
<script type="text/javascript" src="../../js/rpc/inputex-rpc.js"></script> 

<!-- inputEx examples -->
<script src="../js/dpSyntaxHighlighter.js"></script>
<script src="../inputex-examples.js"></script>

</body>
</html>
